import React from 'react'
import { Input, Checkbox, Form, Button } from 'antd'
import styles from './index.module.less'
import BackHomeBtn from '../../components/backHome'

const CheckboxGroup = Checkbox.Group
const { Password, TextArea } = Input

const options = [
	{ label: 'All', value: 'All' },
	{ label: 'Apple', value: 'Apple' },
	{ label: 'Pear', value: 'Pear' },
	{ label: 'Orange', value: 'Orange' },
]

const inputTypes = new Map()
inputTypes.set('text', <Input />)
inputTypes.set('password', <Password />)
inputTypes.set('textArea', <TextArea />)

const FormTest = (props) => {
	const [form] = Form.useForm()
	const configs = [
		{
			label: '账号',
			field: 'account',
			required: true,
			message: '请输入账号',
			type: 'text',
		},
		{
			label: '密码',
			field: 'pwd',
			required: true,
			message: '请输入密码',
			type: 'password',
		},
	]
	const { getFieldValue, validateFields, setFieldsValue } = form
	const normalizeAll = (value, preValue = []) => {
		const allList = ['All', 'Apple', 'Pear', 'Orange']
		// 可根据需要 通过 setFieldsValue 设置联动效果
		// normalizeAll 有第二个参数 可以获取老值
		// getValueFromEvent 需要通过getFieldValue 或 getFieldsValue 获取老值
		if (value.indexOf('All') >= 0) {
			if (value.length < allList.length && preValue && preValue.length === allList.length) {
				const index = value.indexOf('All')
				index >= 0 && value.splice(index, 1)
				return value
			}
			return allList
		}

		if (value.indexOf('All') < 0 && preValue && preValue.indexOf('All') >= 0) {
			return []
		}

		if (value.indexOf('All') < 0 && value.length === allList.length - 1) {
			return allList
		}

		if (value.length < allList.length) {
			const index = value.indexOf('All')
			index >= 0 && value.splice(index, 1)
		}
		return value
	}

	const getValueFromEvent = (value) => {
		// 可根据需要 通过 setFieldsValue 设置联动效果
		const preValue = getFieldValue('note')
		const allList = ['All', 'Apple', 'Pear', 'Orange']

		if (value.indexOf('All') >= 0) {
			if (value.length < allList.length && preValue && preValue.length === allList.length) {
				const index = value.indexOf('All')
				index >= 0 && value.splice(index, 1)
				return value
			}
			return allList
		}

		if (value.indexOf('All') < 0 && preValue && preValue.indexOf('All') >= 0) {
			return []
		}

		if (value.indexOf('All') < 0 && value.length === allList.length - 1) {
			return allList
		}

		if (value.length < allList.length) {
			const index = value.indexOf('All')
			index >= 0 && value.splice(index, 1)
		}
		return value
	}

	const handleSubmit = async (e) => {
		e.preventDefault()
		try {
			const values = await validateFields()
			console.log(values)
		} catch (err) {
			const { errorFields } = err
			console.log(errorFields)
		}
	}

	const onValuesChange = (changedValues, allValues) => {
		// key 值修改的字段
		// 可根据需要 通过 setFieldsValue 设置联动效果
		const key = Reflect.ownKeys(changedValues)[0]
	}

	return (
		<div className={styles.formBox}>
			<Form form={form} scrollToFirstError={true} onValuesChange={onValuesChange}>
				<Form.Item
					name="note"
					label="Note"
					rules={[{ required: true, message: '请选择' }]}
					// normalize={normalizeAll}
					getValueFromEvent={getValueFromEvent}
				>
					<CheckboxGroup options={options} />
				</Form.Item>
				<Form.Item
					name="note1"
					label="Note1"
					rules={[{ required: true, message: '请选择' }]}
					normalize={normalizeAll}
					// getValueFromEvent={getValueFromEvent}
				>
					<CheckboxGroup options={options} />
				</Form.Item>
				{configs &&
					configs.length > 0 &&
					configs.map((item, index) => {
						return (
							<Form.Item
								key={index}
								name={item.field}
								label={item.label}
								rules={[{ required: item.required, message: item.message }]}
							>
								{inputTypes.get(item.type)}
							</Form.Item>
						)
					})}
				<div className={styles.btnBox}>
					<BackHomeBtn />
					<Button type={'primary'} htmlType={'submit'} onClick={handleSubmit}>
						提交
					</Button>
				</div>
			</Form>
		</div>
	)
}

export default FormTest
